<template>
	<div>

		<headers></headers>
		<van-row style='text-align:left;background-color:#FFFF;'>

			<van-col span="3" style='background-color:#545c64;height:100rem;'>
				<left></left>
			</van-col>

			<van-col span="21">

				添加分类

				<el-tree :data="data" :props="defaultProps" node-key="id" default-expand-all
					:expand-on-click-node="false" @node-click="handleNodeClick">
					<span class="custom-tree-node" slot-scope="{ node, data }">
						<span>{{ node.label }}</span>
						<span>
							<el-button type="text" size="mini" @click="() => append(data)">
								添加
							</el-button>

							<el-button type="text" size="mini" @click="() => update(data)">
								修改
							</el-button>

							<!-- <el-button
								type="text"
								size="mini"
								@click="() => update(data)">
								修改
							</el-button> -->

							<el-button type="text" size="mini" @click="() => remove(node, data)">
								删除
							</el-button>
						</span>
					</span>
				</el-tree>

			</van-col>
		</van-row>

		<van-popup v-model="show" style='width:30rem;height:10rem;'>
			<van-field label='分类名称' v-model='cname'></van-field>
			<van-button @click='addcates'>提交</van-button>
		</van-popup>

		<van-popup v-model="update_show" style='width:30rem;height:10rem;'>
			<van-field label='分类名称' v-model='cname'></van-field>
			<van-button @click='updatecates'>提交修改</van-button>
		</van-popup>

	</div>
</template>

<script>
import headers from "@/components/comment/headers";
import left from "@/components/comment/left";
import { get_menu_list, add_menu_list, update_menu_list } from "@/components/axios_api/api.js"; // @符号指的是src路径
export default {
	data() {
		return {
			menulist: [],
			data: [],
			defaultProps: {
				children: "children",
				label: "name",
			},
			pid: 0,
			show: false,
			cname: "",
			cateid: 0,
			update_show: false,
		};
	},
	components: {
		headers: headers,
		left: left,
	},
	methods: {
		handleNodeClick(data) {
			console.log('handleNodeClick', data.name)
		},
		getcatelist() {
			get_menu_list().then((res) => {
				if (res.code == 200) {
					this.data = res.data
				} else {
					alert("获取数据失败");
				}
			});
		},
		append(data) {
			this.pid = data.id;
			this.show = true;
		},
		update(data) {
			console.log('11111', data)
			this.cateid = data.id;
			this.update_show = true;
		},

		// 增加菜单
		addcates() {
			let data = {
				'name': this.cname,
				'pid': this.pid
			}
			add_menu_list(data).then((res) => {
				if (res.code == 200) {
					this.show = false;
					this.cname = "";
					this.cateid = 0;
					this.getcatelist();
				} else {
					alert("添加数据失败" + res.message);
				}
			});

		},

		// 修改菜单
		updatecates() {
		let data = {
			'name': this.cname,
			'id': this.cateid
		}
		update_menu_list(data).then((res) => {
			if (res.code == 200) {
				this.update_show = false;
				this.cname = "";
				this.cateid = 0;
				this.getcatelist();
			} else {
				alert("添加数据失败" + res.message);
			}
		});
		},

		remove(node, data) {
			var id = data.id;
			this.axios.get("admin/delcates?id=" + id).then((res) => {
				if ((res.data.code = 200)) {
					this.getcatelist();
				}
			});
			
		},
	},
	mounted() {
		this.getcatelist();
		// // this.test2()
		// // 从localStorage读取
		var resourcelist = localStorage.getItem("resourcelist");
		this.menulist = JSON.parse(resourcelist);
		this.menulist = ["/mail/", "/add_mail"];
	},
};
</script>

<style>
</style>